<template>
  <div class="publish-resource">
    <div class="resource-bar">
      <a href="javascript:;" :title="item.des" class="resource-bar-item" :class="{ 'is-disabled': !item.canUse, 'is-choose': item.id === currentResource }" v-for="item in myResources" :key="item.id" @click="handleChooseResource(item)">
        <template v-if="item.id != 7">
          <div class="resource-bar-icon">
            <i class="iconfont" v-html="item.icon"></i>
          </div>
          <span>{{ item.name }}</span>
        </template>
        <template v-else-if="item.id == 7">
          <el-popover placement="right" :width="80" trigger="hover" class="box-item" popper-class="style-popover">
            <template #reference>
              <div>
                <div class="resource-bar-icon">
                  <i class="iconfont" v-html="item.icon"></i>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </template>
            <div class="style-choose">
              <el-button link size="small" style="color: #fff" @click="handleLayout('default')">默认排版</el-button>
              <el-button link size="small" style="color: #fff; margin: 6px 0 0" @click="handleLayout('more')">更多排版</el-button>
            </div>
          </el-popover>
        </template>
      </a>
    </div>
    <Transition name="window">
      <div class="resource-window" v-show="currentResource !== 0">
        <a href="javascript:;" class="close-window-btn" @click="handleCloseWindow">
          <i class="iconfont">&#xe8e7;</i>
        </a>
        <div class="import-temps-content" v-if="currentResource == 1">
          <!-- <div class="header-search">
            <input type="text" v-model="templateQuery.name" placeholder="请输入需要查找的关键词" @keydown.enter="searchTemplates" />
            <a href="javascript:;" @click="searchTemplates">
              <i class="iconfont">&#xe643;</i>
            </a>
          </div>-->
          <el-tabs v-model="isCommon" @tab-click="handlePublicOrShareClick">
            <el-tab-pane label="公共库" :name="1"></el-tab-pane>
            <el-tab-pane label="共享库" :name="2"></el-tab-pane>
            <el-tab-pane label="我的" :name="3"></el-tab-pane>
          </el-tabs>
          <div class="tag-container">
            <el-tag v-loading="shareGroupLoading" size="small" v-for="item in shareGroupList" :key="item.id" @click="handleShareGroupClick(item)" :effect="resourceQueryData.shareId === item.id ? 'dark' : 'plain'" type round>{{ item.name }}</el-tag>
          </div>
          <div class="inner-temps-content" v-loading="curFileListLoading">
            <el-scrollbar>
              <div class="scroll-temps-content" v-if="curFileList.length" v-infinite-scroll="loadTemp" :infinite-scroll-immediate="false">
                <div class="temps-item" v-for="item in curFileList" :key="item.id" @click="handleUse(item.resourceData.content)">
                  <!-- <div class="temps-box" v-if="item.thumb">
                    <img :src="item.thumb" alt />
                  </div>-->
                  <p class="temps-name">{{ item.resourceData.title }}</p>
                </div>
              </div>
              <el-empty v-else></el-empty>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { folderSelectPage } from '@/api/shareFolder'
import { shareResourceSelectPage } from '@/api/shareResource'
import { useRouter } from 'vue-router'

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  showFilesUpload: {
    type: Boolean,
    default: false,
  },
})
const router = useRouter()
const modelId = ref(router.currentRoute.value.query.modelId) // 模型id
const emits = defineEmits(['handleUse', 'update:showFilesUpload', 'handleImgEditor', 'handleImportWord', 'handleCollect', 'handleLayout'])
// 资源列表
const myResources = reactive([
  {
    id: 7,
    icon: '&#xe6f7;',
    name: '一键排版',
    des: '一键排版',
    canUse: true,
  },
  {
    id: 1,
    icon: '&#xe62e;',
    name: '模板',
    des: '模板',
    canUse: true,
  },
  {
    id: 2,
    icon: '&#xe65c;',
    name: '插入',
    des: '插入图片、视频、附件等',
    canUse: true,
  },
  {
    id: 3,
    icon: '&#xe656;',
    name: '编辑图片',
    des: '编辑图片',
    canUse: true,
  },
  {
    id: 4,
    icon: '&#xe6f5;',
    name: 'word导入',
    des: '从word导入',
    canUse: true,
  },
  {
    id: 5,
    icon: '&#xe6f6;',
    name: '网址采集',
    des: '从网址采集',
    canUse: true,
  },

  // {
  //   id: 10,
  //   icon: '&#xe65d;',
  //   name: '设计图片',
  //   des: '使用在线设计工具设计图片',
  //   canUse: true,
  // },
])
const currentResource = ref(0)
watch(
  () => props.disabled,
  (newVal) => {
    myResources.forEach((item) => (item.canUse = !newVal))
  },
  { deep: true, immediate: true }
)
const handleChooseResource = (item) => {
  if (!item.canUse) return
  if (item.id === currentResource.value) {
    currentResource.value = 0
  } else {
    currentResource.value = item.id
    switch (item.id) {
      case 1:
        folderSelectAsync()
        break
    }
    switch (item.id) {
      case 2:
        emits('update:showFilesUpload', true)
        currentResource.value = 0
        break
    }
    switch (item.id) {
      case 3:
        emits('handleImgEditor')
        currentResource.value = 0
        break
    }
    switch (item.id) {
      case 4:
        emits('handleImportWord')
        currentResource.value = 0
        break
    }
    switch (item.id) {
      case 5:
        emits('handleCollect')
        currentResource.value = 0
        break
    }
    switch (item.id) {
      case 7:
        currentResource.value = 0
        break
    }
  }
}
const handleLayout = (type) => {
  emits('handleLayout', type)
}
/***************************模板********************************/
const isCommon = ref(1)
// 重置可见参数
const resetKjParams = () =>{
  queryData.value.isPrivate = false
  queryData.value.isCommon = false
  queryData.value.isOther = false
}
// 设置可见参数
const geKjParams = () =>{
  resetKjParams()
  if(isCommon.value == 1){
    queryData.value.isCommon= true
  }else if(isCommon.value == 2){
    queryData.value.isOther= true
  }else{
    queryData.value.isPrivate= true
  }
}
// 公共库/共享库
const handlePublicOrShareClick = () => {
  setTimeout(() => {
    folderSelectAsync()
  }, 0)
}
const queryData = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  modelId: modelId.value,
  type: 1
})
// 获取第一层共享/公共 文件夹
const shareGroupLoading = ref(false)
const shareGroupList = ref([])
const folderSelectAsync = async () => {
  geKjParams()
  shareGroupLoading.value = true
  let res = await folderSelectPage({ ...queryData.value, currentPage: 1, pageSize: 9999 }).finally(() => {
    shareGroupLoading.value = false
  })
  shareGroupList.value = res.data.list
  if (shareGroupList.value.length > 0) {
    resourceQueryData.value.shareId = shareGroupList.value[0].id
    getCurFileList() //默认获取第一个组的资源
  } else {
    curFileList.value = []
  }
  queryData.value.total = res.data.total
}
// 根据共享组id获取资源
const defaultResourceQueryData = {
  shareId: null, //共享组id
}
const curFileList = ref([])
const curFileListLoading = ref(false)
const resourceQueryData = ref(structuredClone(defaultResourceQueryData))
const getCurFileList = async () => {
  curFileListLoading.value = true
  let params = {
    ...resourceQueryData.value,
    modelId: queryData.value.modelId,
    isCommon: queryData.value.isCommon == 1 ? true : false,
    currentPage: queryData.value.currentPage,
    pageSize: queryData.value.pageSize,
  }
  const res = await shareResourceSelectPage(params).finally(() => {
    curFileListLoading.value = false
  })
  // 如果是第一页则直接赋值,否则追加数据
  if (queryData.value.currentPage === 1) {
    curFileList.value = res.data.list
  } else {
    curFileList.value = [...curFileList.value, ...res.data.list]
  }
  queryData.value.total = res.data.total
}
const handleShareGroupClick = (item) => {
  resourceQueryData.value.shareId = item.id
  queryData.value.currentPage = 1 // 重置到第一页
  getCurFileList()
}

// 实现loadTemp触底加载方法
const loadTemp = () => {
  console.log('触底')

  // 如果还有更多数据则加载下一页
  if (curFileList.value.length < queryData.value.total) {
    queryData.value.currentPage += 1
    getCurFileList()
  }
}
// 插入样式或模板
const handleUse = (content) => {
  emits('handleUse', content)
}
// 关闭面板
const handleCloseWindow = () => {
  currentResource.value = 0
}
</script>

<style lang="scss" scoped>
.publish-resource {
  display: flex;
  height: 100%;
  .resource-bar {
    width: 60px;
    box-sizing: border-box;
    border-right: 1px solid #dcdfe6;
    height: 100%;
    background-color: $white;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    a.resource-bar-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 16px;
      color: #444;
      .el-tooltip__trigger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .resource-bar-icon {
        height: 36px;
        width: 36px;
        margin-bottom: 5px;
        background-color: #f0f2f7;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        i {
          font-size: 18px;
          font-weight: bold;
        }
      }
      span {
        font-size: 12px;
      }
    }
    a.resource-bar-item.is-disabled {
      color: #aaaaaa;
      cursor: not-allowed;
    }
    a.resource-bar-item.is-choose {
      color: $mainColor;
      .resource-bar-icon {
        background-color: var(--el-color-primary-light-8);
      }
    }
  }
  .resource-window {
    width: 370px;
    height: 100%;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
    background-color: $white;
    overflow: hidden;
    position: relative;
    .close-window-btn {
      position: absolute;
      i {
        font-size: 20px;
      }
      right: 15px;
      top: 15px;
    }
    .import-temps-content,
    .import-style-content {
      padding-top: 30px;
      width: 370px;
      box-sizing: border-box;
      height: 100%;
      .header-search {
        height: 40px;
        box-sizing: border-box;
        margin: 10px 20px 20px;
        border-bottom: 1px solid #dcdfe6;
        display: flex;
        align-items: center;
        input {
          border: none;
          outline: none;
          flex: 1;
        }
      }
      .inner-temps-content {
        height: calc(100% - 110px);
        .scroll-temps-content {
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          .temps-item {
            width: 100%;
            margin-bottom: 20px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s;
            .temps-box {
              width: 100%;
              border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
              & > img {
                width: 100%;
              }
            }
            .temps-name {
              line-height: 60px;
              text-align: center;
            }
            &:hover {
              border-color: $mainColor;
              .temps-box {
                border-color: $mainColor;
              }
            }
          }
        }
      }
    }
    .import-temps-content {
      :deep(.el-tabs) {
        .el-tabs__header {
          margin: 0 0 15px;
          padding: 0 20px;

          .el-tabs__nav-wrap::after {
            height: 1px;
          }

          .el-tabs__item {
            font-size: 14px;
            height: 40px;
            line-height: 40px;

            &.is-active {
              font-weight: 600;
            }
          }
        }
      }
      .tag-container {
        padding: 0 20px 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-bottom: 1px solid var(--el-border-color-light);
        margin-bottom: 15px;

        .el-tag {
          cursor: pointer;
          padding: 0 16px;
          transition: all 0.3s;
          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          }

          &.el-tag--dark {
            border: none;
          }

          &.el-tag--plain {
            background-color: var(--el-fill-color-blank);

            &:hover {
              color: var(--el-color-primary);
              border-color: var(--el-color-primary);
            }
          }
        }
      }
      .inner-temps-content {
        height: calc(100% - 160px);
      }
    }
  }
}

.window-enter-to,
.window-leave-from {
  max-width: 370px;
}
.window-enter-active,
.window-leave-active {
  transition: all 0.8s;
}
.window-enter-from,
.window-leave-to {
  max-width: 0;
}
</style>
